<template>
  <view class="container">
    <view class="tip" @click="exampleModel = true">
      <text>
        您的订单中包含处方药，需要提供线下正规处方药或参与互联网医药开方问诊服务。
      </text>
      <text>示例</text>
    </view>

    <view class="form-container">

      <view class="form-item" @click="toPatientList">
        <view class="form-item-left">
          <u-icon name="account-fill"></u-icon>
          <text>用药人</text>
        </view>
        <view class="form-item-right">
          <text class="text">{{patient?patient.patientName:'未选择'}}</text>
          <u-icon name="arrow-right"></u-icon>
        </view>
      </view>

      <radio-group>
        <view class="prescription">
          <view class="form-item item-spec-1" @click="radioChange(1)">
            <view class="form-item-left">
              <u-icon name="file-text-fill"></u-icon>
              <text>有处方单</text>
            </view>
            <view class="form-item-right">
              <radio :checked="form.has_prescription==1" class="gg-radio" :value="1" />
            </view>
          </view>

          <view class="has-prescription" v-show="form.has_prescription==1">
            <text class="title">
              1.药师审方
              <text style="margin: 0 8rpx"> > </text>
              2.药店发货
            </text>
            <view>
              <u-upload name="photo" :action="action" :file-list="fileListPre"
                        @on-remove="removeImgPre"
                        @on-success="uploadSuccessPre"></u-upload>
            </view>
            <text class="attention">注：药店药师审核，请上传一张正规处方</text>
          </view>

          <view class="form-item item-spec-2" @click="radioChange(0)">
            <view class="form-item-left">
              <u-icon name="file-text-fill"></u-icon>
              <text>无处方单，免费开方</text>
            </view>
            <view class="form-item-right">
              <radio :checked="form.has_prescription==0" class="gg-radio" :value="0" />
            </view>
          </view>

          <view class="no-prescription" v-show="form.has_prescription==0">
            <text class="title">
              1.医生审方
              <text style="margin: 0 8rpx"> > </text>
              2.药师审方
              <text style="margin: 0 8rpx"> > </text>
              3.药店发货
            </text>

            <view class="desc-container">
              <view class="desc-item">
                <text class="title"><text style="color: red;margin-right: 8rpx;">*</text>疾病名称</text>
                <view class="dis-container">
                  <view v-if="diseaseList.length>0" class="tag"
                        v-for="(item,index) in diseaseList" :key="index"
                        :class="{'tag-selected':item.selected}"
                        @click="changeTagStatus(item,index)">{{item.name}}</view>

                  <view class="tag" @click="moreTagModelShow = true">更多+</view>
                </view>
              </view>

              <view class="desc-item">
                <text class="title"><text style="color: red;margin-right: 8rpx;">*</text>诊断级别</text>
                <view class="diagnostic_level">
                  <view class="item" @click="diagnosticLevelChange(1)">
                    <u-icon :style="'color: '+ (form.diagnostic_level==1?'#09C15F':'#EDEDED')" name="checkmark-circle-fill"></u-icon>
                    <text>普通患病并已确诊</text>
                  </view>
                  <view class="item" @click="diagnosticLevelChange(2)">
                    <u-icon :style="'color: '+ (form.diagnostic_level==2?'#09C15F':'#EDEDED')" name="checkmark-circle-fill"></u-icon>
                    <text>慢性病并确诊</text>
                  </view>
                  <view class="item" @click="diagnosticLevelChange(3)">
                    <u-icon :style="'color: '+ (form.diagnostic_level==3?'#09C15F':'#EDEDED')" name="checkmark-circle-fill"></u-icon>
                    <text>尚未确诊</text>
                  </view>
                </view>
              </view>

              <view class="desc-item">
                <text class="title"><text style="color: red;margin-right: 8rpx;">*</text>既往用药情况</text>
                <view class="diagnostic_level">
                  <view class="item" @click="drugUsageChange(1)">
                    <u-icon :style="'color: '+ (form.drug_usage==1?'#09C15F':'#EDEDED')" name="checkmark-circle-fill"></u-icon>
                    <text>药物用完需要继续购买完成疗程</text>
                  </view>
                  <view class="item" @click="drugUsageChange(2)">
                    <u-icon :style="'color: '+ (form.drug_usage==2?'#09C15F':'#EDEDED')" name="checkmark-circle-fill"></u-icon>
                    <text>医生建议使用此药</text>
                  </view>
                </view>
              </view>

              <view class="desc-item">
                <text class="title"><text style="color: red;margin-right: 8rpx;">*</text>描述症状</text>
                <view style="margin-top: 10rpx;">
                  <u-input :border-color="'#EDEDED'" v-model="form.diagnose_description" type="textarea" border height="150" />
                  <!--<textarea style="border: 1rpx solid #EDEDED;height: 300rpx;width: 100%;padding: 10rpx;box-sizing: border-box" v-model="form.diagnose_description" placeholder="请输入描述症状" />-->
                </view>
              </view>

              <!--<view class="desc-item">
                <text class="title">就诊凭证</text>
                <view>
                  <u-upload name="photo" :action="action" :file-list="fileListVisit"
                            @on-remove="removeImgVisit"
                            @on-success="uploadSuccessVisit"></u-upload>
                </view>
              </view>-->

            </view>

          </view>

        </view>
      </radio-group>

    </view>

    <view style="height: 120rpx;background-color: #EDEDED"></view>
    <view class="btn-container">
      <view @click="toOrder()" class="content">问诊开方</view>
    </view>

    <u-popup v-model="exampleModel" mode="center" closeable="true">
      <view>
        <img mode="widthFix" style="width: 65vw;" show-menu-by-longpress="true" :src="'https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/yaojike2020/images/other/prescription.jpg'"></img>
      </view>
    </u-popup>

    <more-tag @hideChooseModal="hideChooseModal" @getMoreTag="getMoreTag" :showModal="moreTagModelShow"></more-tag>

  </view>
</template>

<script>
  import {PatientList} from "../../model/prescription/PatientList";
  import {PrescriptionStatus} from "../../utils/enum";
  import moreTag from "../../components/more-tag"

  export default{
    components: {
      "more-tag": moreTag
    },
    data(){
      return {
        action: this.$api.UPLOAD_URL,
        form: {
          prescription_imgs: [],
          prescription_order: '',
          has_prescription: 1,
          user_drug_id: '',
          disease_info: [],
          diagnose_description: '',
          diagnostic_level: 1,
          drug_usage: 1
        },
        description: [],
        patient: '',
        fileListPre: [],
        fileListVisit: [],
        imgListPre: [],
        imgListVisit: [],
        diseaseList: [],
        prescription_imgs: [],
        visit_imgs: [],
        fromType: '',
        exampleModel: false,
        moreTagModelShow: false
      }
    },
    async onLoad(options) {
      this.fromType = options.from
      await this.initDiseaseList()
      if (this.$store.state.prescriptionInfo) {
        this.initCurrentPrescriptionInfo(this.$store.state.prescriptionInfo)
      }
    },
    onShow() {
      this.getDefaultPatient()
    },
    methods:{

      diagnosticLevelChange(e){
        this.form.diagnostic_level = e
      },

      drugUsageChange(e){
        this.form.drug_usage = e
      },

      initCurrentPrescriptionInfo(data) {
        this.form = data
        if(data.has_prescription==1){
          this.prescription_imgs = data.prescription_imgs
          this.visit_imgs = []
        } else {
          this.visit_imgs = data.prescription_imgs
          this.prescription_imgs = []

          //处理疾病名称
          if(data.disease_info){
            let arr = []
            data.disease_info.forEach(item => {
              let disease = this.diseaseList.find( d => d.id == item.id)
              if(disease){
                disease.selected = true
              } else{
                item.selected = true
                arr.push(item)
              }
            })
            this.diseaseList = this.diseaseList.concat(arr)
          }
        }

        if(data.fileListPre){
          data.fileListPre.forEach(item => {
            let obj = {}
            obj.url = item.url
            this.fileListPre.push({url: item.url})
          })
        }

        if(data.fileListVisit){
          data.fileListVisit.forEach(item => {
            let obj = {}
            obj.url = item.url
            this.fileListVisit.push({url: item.url})
          })
        }

        this.imgListPre = data.fileListPre?data.fileListPre:[]
        this.imgListVisit = data.fileListVisit?data.fileListVisit:[]

      },

      uploadSuccessPre(data, index, lists, name) {
        this.prescription_imgs.push(data.data.id)
        this.imgListPre.push({url: data.data.img_url})
      },

      uploadSuccessVisit(data, index, lists, name) {
        this.visit_imgs.push(data.data.id)
        this.imgListVisit.push({url: data.data.img_url})
      },

      removeImgPre(index, lists, name) {
        this.prescription_imgs.splice(index,1)
        this.imgListPre.splice(index,1)
      },

      removeImgVisit(index, lists, name) {
        this.visit_imgs.splice(index,1)
        this.imgListVisit.splice(index,1)
      },

      radioChange(e) {
        this.form.has_prescription = e
      },

      toPatientList() {
        this.$currency.navigateTo('/pages/prescription/patientList')
      },

      async initDiseaseList() {
        this.diseaseList = []
        let orderParams = this.$store.state.modulesOrder.order
        if (orderParams.goods_info.length) {
          for (const item of orderParams.goods_info) {
            await this.getDiseaseList(item.name, item.specification)
          }
        }
        this.diseaseList.forEach((item,index) => {
          item.selected = false
        })
      },

      //TODO  medicine_name的值是通过截取字符获取到的 如果商品名称（并非药品名称）出现错误(如字符格式不是*+空格+商品名称+空格+*)则会报错
      async getDiseaseList(name,space) {
        const res = await this.$api.getDiseaseList({
          medicine_name: this.handleMedicineName(name),
          medicine_space: space
        },this.$baseUrl)
        if(res.data.level==="success"){
          this.diseaseList = this.diseaseList.concat(res.data.data)
        }
      },

      handleMedicineName(name,space) {
        let arr = []
        arr = name.split(" ")
        if(arr.length>=3){
          return arr[1]
        } else {
          return name
        }
      },

      changeTagStatus(item,index){
        item.selected = !item.selected
        this.$set(this.diseaseList,index,item)
        this.description = []
        this.diseaseList.forEach(item => {
          if(item.selected){
            this.description.push(item.name)
          }
        })
      },

      async toOrder() {

        if(!this.patient.id){
          this.$currency.showToast('请选择用药人')
          return
        }
        if(this.prescription_imgs.length<=0 && this.form.has_prescription == 1){
          this.$currency.showToast('请上传处方药图片')
          return
        }

        //设置疾病名称
        this.form.disease_info = []
        this.diseaseList.forEach(item => {
          if(item.selected){
            let obj = {
              id: item.id,
              name: item.name
            }
            this.form.disease_info.push(obj)
          }
        })

        if(this.form.has_prescription == 0 && !this.form.disease_info.length>0){
          this.$currency.showToast('请填写疾病名称')
          return
        }

        if(this.form.has_prescription == 0 && !this.form.diagnose_description){
          this.$currency.showToast('请填写描述症状')
          return
        }

        //判断是否有处方单
        if(this.form.has_prescription==PrescriptionStatus.HasPrescription){
          this.form.prescription_imgs = this.prescription_imgs
          this.form.fileListPre = this.imgListPre
        } else{
          this.form.prescription_imgs = this.visit_imgs
          this.form.fileListVisit = this.imgListVisit
        }


        this.form.user_drug_id = this.patient.id
        this.form.patient_name = this.patient.patientName
        this.form.patient_phone = this.patient.patientPhone
        this.$store.state.prescriptionInfo = this.form
        wx.navigateBack()

      },

      async getDefaultPatient() {
        if (this.$store.state.patient) {
          this.patient = this.$store.state.patient
          return
        }
        const patient = await PatientList.getDefaultPatient(this.$baseUrl)
        this.patient = patient?patient:''
      },

      hideChooseModal() {
        this.moreTagModelShow = false
      },

      getMoreTag(data) {
        if(data){
          this.diseaseList = this.diseaseList.concat(data)
        }
      }

    },

  }
</script>

<style>
  /* 自定义 radio 样式 */
  /* radio 选中框样式 */
  .gg-radio .wx-radio-input{
    border-radius: 50%;
    width: 28rpx;
    height: 28rpx;
  }
  /* 选中后的 背景样式 （红色背景 无边框 可根据UI需求自己修改） */
  .gg-radio .wx-radio-input.wx-radio-input-checked{
    border: none;
    background: red;
  }
  /* 选中后的样式 （可根据设计稿需求自己修改） 对勾大小、背景颜色*/
  .gg-radio .wx-radio-input.wx-radio-input-checked::before{
    border-radius: 50%;
    width: 44rpx;
    height: 44rpx;
    line-height: 44rpx;
    text-align: center;
    font-size: 26rpx;
    color:#fff;
    background: #09C15F;
    border-color: #09C15F;
  }
</style>
<style lang="scss" scoped>

  .container{
    min-height: 100vh;
    background-color: #EDEDED;
  }

  .tip{
    padding: 10rpx 20rpx;
    background-color: #EDF0F7;
    font-size: 24rpx;
    display: flex;
    align-items: center;
    color: #333333;
    text:last-child{
      width: 200rpx;
      text-align: right;
    }
  }

  .form-container{
    margin-top: 15rpx;
    .form-item{
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-radius: 10rpx;
      padding: 25rpx 20rpx;
      background-color: #ffffff;
      margin-bottom: 20rpx;
      .form-item-left{
        display: flex;
        align-items: center;
        color: #333333;
        text{
          margin-left: 20rpx;
          font-size: 28rpx;
          font-weight: bold;
        }
      }

      .form-item-right{
        display: flex;
        color: grey;
        .text{
          margin-right: 20rpx;
          font-size: 28rpx;
        }
      }
    }

    .prescription{
      background-color: #ffffff;
      padding-bottom: 20rpx;
      .item-spec-1{
        border-radius: 10rpx 10rpx 0 0;
        margin-bottom: 0;
        padding-bottom: 10rpx;
      }
      .item-spec-2{
        border-radius: 0 0 10rpx 10rpx;
        margin-bottom: 0;
        padding-bottom: 10rpx;
      }

      .has-prescription{
        padding: 0 20rpx;
        .title{
          font-size: 22rpx;
          color: grey;
        }
        .attention{
          color: grey;
          font-size: 22rpx;
        }
      }

      .no-prescription{
        padding: 0 20rpx;
        .title{
          font-size: 22rpx;
          color: grey;
        }
        .desc-container{
          .desc-item{
            margin-top: 16rpx;
            .title{
              font-size: 26rpx;
              font-weight: bold;
              color: #807F85;
              padding: 10rpx 0;
            }
            .dis-container{
              display: flex;
              flex-wrap: wrap;
              margin-top: 16rpx;
              .tag{
                display: inline-block;
                align-items: center;
                -moz-box-align: center;
                box-sizing: border-box;
                line-height: 1;
                border-radius: 100rpx;
                font-size: 22rpx;
                padding: 15rpx 25rpx;
                background-color: #EDEDED;
                color: grey;
                margin-right: 20rpx;
                margin-bottom: 14rpx;
              }
              .tag-selected{
                color: #ffffff;
                background-color: #09C15F;
              }
            }

            .diagnostic_level{
              font-size: 28rpx;
              .item{
                margin-top: 20rpx;
                text{
                  margin-left: 16rpx;
                }
              }
            }

          }
        }
      }

    }

  }

  .btn-container{
    display:flex;
    flex-direction:row;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 120rpx;
    position: fixed;
    bottom: 0;
    color: #ffffff;
    background-color: #EDEDED;
    z-index: 9999999;
    .content{
      width: 75%;
      height: 90rpx;
      background-color: #09C15F;
      border-radius: 50rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

</style>
